<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>电信套餐订购系统 - 管理员后台</title>
    <!-- 引入项目现有的CSS -->
    <link rel="stylesheet" href="./css/github-markdown-light.css">
    <style>
        body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
            background-color: #f6f8fa;
            color: #1f2328;
            min-height: 100vh;
        }
        
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            box-sizing: border-box;
        }
        
        .header {
            background-color: #ffffff;
            padding: 20px;
            border: 1px solid #d1d9e0;
            border-radius: 8px;
            margin-bottom: 0;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .header h1 {
            margin: 0;
            font-size: 24px;
            color: #1f2328;
        }
        
        .logout-btn {
            padding: 8px 16px;
            background-color: #d73a49;
            color: #ffffff;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            text-decoration: none;
        }
        
        .logout-btn:hover {
            background-color: #cb2431;
        }
        
        /* Tab导航栏样式 */
        .tab-nav {
            background-color: #ffffff;
            border: 1px solid #d1d9e0;
            border-top: none;
            border-radius: 0 0 8px 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            overflow-x: auto;
            white-space: nowrap;
        }
        
        .tab-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
        }
        
        .tab-item {
            display: inline-block;
        }
        
        .tab-link {
            display: block;
            padding: 15px 20px;
            text-decoration: none;
            color: #1f2328;
            font-size: 14px;
            font-weight: 500;
            border-bottom: 3px solid transparent;
            transition: all 0.2s ease;
        }
        
        .tab-link:hover {
            background-color: #f6f8fa;
        }
        
        .tab-link.active {
            border-bottom-color: #0969da;
            color: #0969da;
            background-color: #f6f8fa;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .stat-card {
            background-color: #ffffff;
            padding: 20px;
            border: 1px solid #d1d9e0;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .stat-card h3 {
            margin: 0 0 10px 0;
            font-size: 16px;
            color: #818b98;
            font-weight: normal;
        }
        
        .stat-card .stat-value {
            font-size: 32px;
            font-weight: 600;
            color: #0969da;
            margin: 0 0 10px 0;
        }
        
        .stat-card .stat-change {
            font-size: 14px;
            color: #28a745;
        }
        
        .quick-links {
            background-color: #ffffff;
            padding: 20px;
            border: 1px solid #d1d9e0;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .quick-links h2 {
            margin: 0 0 20px 0;
            font-size: 20px;
            color: #1f2328;
        }
        
        .links-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
        }
        
        .link-card {
            padding: 15px;
            border: 1px solid #d1d9e0;
            border-radius: 6px;
            background-color: #f6f8fa;
            text-decoration: none;
            color: #1f2328;
            transition: all 0.2s ease;
        }
        
        .link-card:hover {
            background-color: #0969da;
            color: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }
        
        .link-card h3 {
            margin: 0 0 5px 0;
            font-size: 16px;
        }
        
        .link-card p {
            margin: 0;
            font-size: 14px;
            color: #818b98;
        }
        
        .link-card:hover p {
            color: rgba(255, 255, 255, 0.8);
        }
        
        .system-info {
            background-color: #ffffff;
            padding: 20px;
            border: 1px solid #d1d9e0;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .system-info h2 {
            margin: 0 0 15px 0;
            font-size: 20px;
            color: #1f2328;
        }
        
        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
        }
        
        .info-item {
            display: flex;
            flex-direction: column;
        }
        
        .info-label {
            font-size: 14px;
            color: #818b98;
            margin-bottom: 5px;
        }
        
        .info-value {
            font-size: 14px;
            color: #1f2328;
            font-weight: 500;
        }
        
        /* iframe容器样式 */
        .content-container {
            background-color: #ffffff;
            border: 1px solid #d1d9e0;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            min-height: 800px;
            display: flex;
            flex-direction: column;
        }
        
        .home-content {
            padding: 20px;
            flex-grow: 1;
        }
        
        .page-iframe {
            width: 100%;
            min-height: 800px;
            border: none;
            display: none;
            flex-grow: 1;
        }
        
        /* 内容显示/隐藏控制 */
        .content-section {
            display: none;
        }
        
        .content-section.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>管理员后台 - 电信套餐订购系统</h1>
            <a href="login.html" class="logout-btn">退出登录</a>
        </div>
        
        <!-- Tab导航栏 -->
        <div class="tab-nav">
            <ul class="tab-list">
                <li class="tab-item">
                    <a href="#" data-href="home" class="tab-link active">首页</a>
                </li>
                <li class="tab-item">
                    <a href="#" data-href="package_manage.html" class="tab-link">套餐管理</a>
                </li>
                <li class="tab-item">
                    <a href="#" data-href="user_manage.html" class="tab-link">用户管理</a>
                </li>
                <li class="tab-item">
                    <a href="#" data-href="sse_admin.html" class="tab-link">智能推荐</a>
                </li>
                <li class="tab-item">
                    <a href="#" data-href="package_order.html" class="tab-link">套餐订购</a>
                </li>
                <li class="tab-item">
                    <a href="#" data-href="order_manage.html" class="tab-link">订单管理</a>
                </li>
            </ul>
        </div>
        
        <!-- 内容容器 -->
        <div class="content-container">
            <!-- 首页内容 -->
            <div id="home" class="content-section home-content active">
                <div class="stats-grid">
                    <div class="stat-card">
                        <h3>套餐总数</h3>
                        <div class="stat-value">7</div>
                        <div class="stat-change">较上月 +2</div>
                    </div>
                    <div class="stat-card">
                        <h3>优惠政策</h3>
                        <div class="stat-value">5</div>
                        <div class="stat-change">较上月 +1</div>
                    </div>
                    <div class="stat-card">
                        <h3>推荐请求</h3>
                        <div class="stat-value">128</div>
                        <div class="stat-change">今日 +15</div>
                    </div>
                    <div class="stat-card">
                        <h3>用户满意度</h3>
                        <div class="stat-value">94%</div>
                        <div class="stat-change">较上月 +2%</div>
                    </div>
                </div>
                
                <div class="quick-links">
                    <h2>快捷操作</h2>
                    <div class="links-grid">
                        <a href="#" data-href="package_manage.html" class="link-card">
                            <h3>套餐管理</h3>
                            <p>查看、编辑和删除套餐</p>
                        </a>
                        <a href="#" data-href="user_manage.html" class="link-card">
                            <h3>用户管理</h3>
                            <p>查看、编辑和管理用户信息</p>
                        </a>
                        <a href="#" data-href="sse_admin.html" class="link-card">
                            <h3>智能推荐</h3>
                            <p>AI个性化推荐套餐</p>
                        </a>
                        <a href="#" data-href="package_order.html" class="link-card">
                            <h3>套餐订购</h3>
                            <p>为用户办理套餐订购</p>
                        </a>
                        <a href="#" data-href="order_manage.html" class="link-card">
                            <h3>订单管理</h3>
                            <p>查看和管理所有订单</p>
                        </a>
                    </div>
                </div>
                
                <div class="system-info">
                    <h2>系统信息</h2>
                    <div class="info-grid">
                        <div class="info-item">
                            <div class="info-label">系统版本</div>
                            <div class="info-value">v1.0.0</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">最后更新时间</div>
                            <div class="info-value">2025-10-10</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">当前在线用户</div>
                            <div class="info-value">3</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">服务状态</div>
                            <div class="info-value" style="color: #28a745;">正常运行</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- iframe容器 -->
            <iframe id="pageIframe" class="page-iframe" src="" frameborder="0"></iframe>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const tabLinks = document.querySelectorAll('.tab-link');
            const contentSections = document.querySelectorAll('.content-section');
            const pageIframe = document.getElementById('pageIframe');
            const quickLinks = document.querySelectorAll('.link-card');
            const contentContainer = document.querySelector('.content-container');
            
            // 处理tab点击事件
            function handleTabClick(e) {
                e.preventDefault();
                
                const href = this.getAttribute('data-href');
                
                // 移除所有tab的active状态
                tabLinks.forEach(link => link.classList.remove('active'));
                
                // 添加当前tab的active状态
                this.classList.add('active');
                
                // 如果是首页
                if (href === 'home') {
                    contentSections.forEach(section => section.classList.remove('active'));
                    document.getElementById('home').classList.add('active');
                    pageIframe.style.display = 'none';
                    // 重置contentContainer高度
                    contentContainer.style.minHeight = '800px';
                } 
                // 其他页面在iframe中加载
                else {
                    contentSections.forEach(section => section.classList.remove('active'));
                    pageIframe.style.display = 'block';
                    pageIframe.src = href;
                    // 增加contentContainer高度以容纳更多内容
                    contentContainer.style.minHeight = '900px';
                }
            }
            
            // 动态调整iframe高度
            function adjustIframeHeight() {
                try {
                    const iframeContent = pageIframe.contentDocument || pageIframe.contentWindow.document;
                    const contentHeight = iframeContent.body.scrollHeight || iframeContent.documentElement.scrollHeight;
                    
                    // 增加一些额外空间确保内容完全显示
                    const adjustedHeight = Math.max(contentHeight + 50, 800);
                    pageIframe.style.minHeight = adjustedHeight + 'px';
                    contentContainer.style.minHeight = adjustedHeight + 'px';
                } catch (e) {
                    console.warn('无法调整iframe高度:', e);
                }
            }
            
            // 为iframe添加加载完成事件
            pageIframe.addEventListener('load', adjustIframeHeight);
            
            // 添加窗口大小变化时重新调整iframe高度
            window.addEventListener('resize', function() {
                if (pageIframe.style.display === 'block') {
                    setTimeout(adjustIframeHeight, 300);
                }
            });
            
            // 为所有tab链接添加点击事件
            tabLinks.forEach(link => {
                link.addEventListener('click', function() {
                    handleTabClick.apply(this, arguments);
                    // 如果点击的是其他页面tab，延迟调整高度以确保内容加载
                    if (this.getAttribute('data-href') !== 'home') {
                        setTimeout(adjustIframeHeight, 1000);
                    }
                });
            });
            
            // 为快捷操作链接添加点击事件
            quickLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const href = this.getAttribute('data-href');
                    
                    // 找到对应的tab并触发点击事件
                    const targetTab = document.querySelector(`.tab-link[data-href="${href}"]`);
                    if (targetTab) {
                        targetTab.click();
                    }
                });
            });
            
            // 为统计卡片添加点击事件示例
            const statCards = document.querySelectorAll('.stat-card');
            statCards.forEach(card => {
                card.addEventListener('click', function() {
                    // 这里可以添加显示详细统计信息的逻辑
                    console.log('查看统计详情:', this.querySelector('h3').textContent);
                });
            });
        });
    </script>
</body>
</html>